import {createAppContainer,createSwitchNavigator} from "react-navigation";
import {createStackNavigator} from "react-navigation-stack";
import {createReactNavigationReduxMiddleware, createReduxContainer} from 'react-navigation-redux-helpers';
import Welcome from "../pages/Welcome"
import Home from "../pages/Home"
import {connect} from "react-redux";
import Header from "../Components/Header"
import GuidePage from "../pages/Guide";
import {View, Text, TextStyle} from "react-native";
import  React,{Component} from "react";
import Ionicons from "react-native-vector-icons/Ionicons"
import { IconProps} from "react-native-vector-icons/Icon";
export const rootCom = "Init";
const InitNavigator = createStackNavigator({
    Welcome:{
        screen:Welcome,
        navigationOptions: {
            header: ()=>null
        }},
},);
const GuidePageNavigator = createStackNavigator({
    Guide:{screen:GuidePage,navigationOptions: {
            header: ()=>null
        }},
});
interface IconOptions {
    iconStyle?:IconProps|any
    textStyle?:TextStyle
}
let defaultOptions:IconOptions = {
    iconStyle:{
        name:"chevron-back",
    }
}
/**
 * @Author Training
 * @Desc 标题左侧内容
 * @Params text 左侧文字显示  如果为undefined 或者null 则不展示文字 展示图标
 * @params options 配置信息  包含图标配置 iconStyle 和文字配置 textStyle
 * @Return React Dom
 */

function headerLeft(text?:string,options:IconOptions = defaultOptions) {
    let iconStyle = {
        ...defaultOptions.iconStyle,
        ...options.iconStyle
    };
    return (
        <View style={{paddingLeft:20}}>
            {(typeof text === "string" && text !== null && text !== undefined)?<Text style={options.textStyle}>{text}</Text>:<Ionicons name={iconStyle.name} color={iconStyle.color} size={iconStyle.size} />}
        </View>
    )
}
const AppNavigator = createStackNavigator(
    {
        Home:{screen:Home},
    },
    {
        defaultNavigationOptions:{
           /* headerTitle:"首页",
            headerTitleAlign:"center",
            headerStyle:{
                shadowOpacity:0,
                elevation:0,
                borderBottomWidth:0
            },
            cardShadowEnabled:false*/
           header:()=>null
        }
    }
    );

export const RootNavigator:any =  createAppContainer(createSwitchNavigator({
    Init:InitNavigator,
    Main:AppNavigator,
    Guide:GuidePageNavigator
},{
        navigationOptions: {
            header: null
        }
    }
    ));
export const middleware = createReactNavigationReduxMiddleware((state:any)=>state.nav,'root',);
const AppWithNavigationState = createReduxContainer(RootNavigator,'root');
const mapStateToProps = (state:any) => {
    return ({
        state: state.nav,//v2
    });
}
export default connect(mapStateToProps)(AppWithNavigationState);
